<template>
	<div v-if="!vertical" class="layerResources">
		<view class="arrow" :class="{disabled:swiperIndex<=0}" @click="clickSwiperArrow(-1)"
			style="right:calc(100% + 0.8vw);">
			<uni-icons type="left" size="1vw"></uni-icons>
		</view>
		<swiper v-if="!fakeSwiper" class="swiper" :current="swiperIndex" :display-multiple-items="displayLength"
			:disable-touch="disableTouch" @change="change" @animationfinish="animationfinish">
			<swiper-item v-for="layerResource of layerResources">
				<view class="swiperItem">
					<view class="layerResource"
						:class="{grey:greyIndexList.indexOf(String(layerResource.index)) > -1, active:activeIndexList.indexOf(layerResource.index) > -1}"
						@click="clickLayer(layerResource.index)">
						<image class="href" :src="layerResource.href" mode="aspectFit"></image>
						<view class="name">
							{{layerResource.resourceName}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<template v-else>
			<view class="swiper" style="display: flex;">
				<view v-for="(layerResource,index) of layerResources.slice(swiperIndex, swiperIndex + displayLength)">
					<view class="swiperItem">
						<movable-view class="layerResource" style="height: auto; position: relative;z-index:5;"
							:x="moveList[index].x" :y="moveList[index].y" :damping="2000" direction="all"
							@touchend="moveTouchend($event,index)" @mouseup="moveTouchend($event,index)"
							@change="moveChange($event,index)">
							<image class="href" :src="layerResource.href" mode="aspectFit"></image>
							<view class="name">
								{{layerResource.resourceName}}
							</view>
						</movable-view>
					</view>
				</view>
			</view>
		</template>

		<view class="arrow" :class="{disabled:swiperIndex>=layerResources.length - displayLength}"
			@click="clickSwiperArrow(1)" style="left:calc(100% + 0.8vw);">
			<uni-icons type="right" size="1vw"></uni-icons>
		</view>
	</div>

	<div v-else-if="vertical" class="layerResources_Vertical">
		<view class="arrow" :class="{disabled:swiperIndex<=0}" @click="clickSwiperArrow(-1)"
			style="bottom:calc(100% + 0.8vw);">
			<uni-icons type="top" size="1vw"></uni-icons>
		</view>
		<swiper v-if="!fakeSwiper" class="swiper" vertical :current="swiperIndex"
			:display-multiple-items="displayLength" :disable-touch="disableTouch" @change="change"
			@animationfinish="animationfinish">
			<swiper-item v-for="layerResource of layerResources">
				<view class="swiperItem">
					<view class="layerResource"
						:class="{grey:greyIndexList.indexOf(String(layerResource.index)) > -1 , active:activeIndexList.indexOf(layerResource.index) > -1}"
						@click="clickLayer(layerResource.index)">
						<image class="href" :src="layerResource.href" mode="aspectFit"></image>
						<view class="name">
							{{layerResource.resourceName}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<template v-else>
			<view class="swiper" style="display: flex;flex-direction: column;">
				<view v-for="(layerResource,index) of layerResources.slice(swiperIndex, swiperIndex + displayLength)">
					<view class="swiperItem">
						<movable-view class="layerResource" style="height: auto; position: relative;z-index:5;"
							:x="moveList[index].x" :y="moveList[index].y" :damping="2000" direction="all"
							@touchend="moveTouchend($event,index)" @mouseup="moveTouchend($event,index)"
							@change="moveChange($event,index)">
							<image class="href" :src="layerResource.href" mode="aspectFit"></image>
							<view class="name">
								{{layerResource.resourceName}}
							</view>
						</movable-view>
					</view>
				</view>
			</view>
		</template>

		<view class="arrow" :class="{disabled:swiperIndex>=layerResources.length - displayLength}"
			@click="clickSwiperArrow(1)" style="top:calc(100% + 0.8vw);">
			<uni-icons type="bottom" size="1vw"></uni-icons>
		</view>
	</div>





</template>

<script>
	export default {
		props: {
			layerResources: {
				type: Array,
				default: () => []
			},
			vertical: {
				type: Boolean,
				default: false
			},
			disableTouch: {
				type: Boolean,
				default: false
			},
			fakeSwiper: {
				type: Boolean,
				default: false
			},
			greyIndexList: {
				type: Array,
				default: () => []
			},
			activeIndexList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			displayLength() {
				if (this.vertical) {
					return 4
				} else {
					return 6
				}
			}
		},
		data() {
			return {
				swiperIndex: 0,
				swiperAnimationFlag: false, //swiper是否正在动画
				moveList: [],
			}
		},
		created() {
			if (this.fakeSwiper) {
				for (let i = 0; i < this.displayLength; i++) {
					this.moveList.push({
						x: 0,
						y: 0,
						old_x: 0,
						old_y: 0
					})

				}
			}
		},
		methods: {
			change(e) {
				this.swiperAnimationFlag = true;
				this.swiperIndex = e.detail.current;
			},
			animationfinish(e) {
				this.swiperAnimationFlag = false;
			},
			clickLayer(layerIndex) {
				this.$emit("clickLayer", layerIndex)
			},
			clickSwiperArrow(swiperChange) {
				if (swiperChange == -1) {
					if (this.swiperIndex > 0) {
						this.swiperIndex--
					}
				} else if (swiperChange == 1) {
					if (this.swiperIndex < this.layerResources.length - this.displayLength) {
						this.swiperIndex++
					}
				}
			},
			moveChange(e, index) {
				let item = this.moveList[index];
				item.old_x = e.detail.x;
				item.old_y = e.detail.y;
			},
			moveTouchend(e, index) {
				let item = this.moveList[index];
				item.x = item.old_x;
				item.y = item.old_y;
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".layerResource")
					.fields({
							rect: true,
						},
						(data) => {

							//计算拖拽的释放中心点
							this.$emit("drag", {
								x: (data[index].left + data[index].right) / 2,
								y: (data[index].top + data[index].bottom) / 2,
								layerIndex: this.layerResources[index + this.swiperIndex].index
							});
							this.$nextTick(() => {
								item.x = 0;
								item.y = 0;
							})
						})
					.exec();

			},

		}
	}
</script>

<style lang="scss" scoped>
	.layerResources {
		position: relative;

		.arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 2vw;
			height: 2vw;
			background-color: #EFF4FF;
			border-radius: 0.5vw;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;

			/deep/ .uni-icons {
				color: #2380E9 !important;
			}

			&.disabled {
				border: 1px solid #ccc;
				background-color: #F8FAFB;

				/deep/ .uni-icons {
					color: #ccc !important;
				}
			}

		}

		.swiper {
			$layerWidth : 11vw;
			$hrefHeight: 6vw;
			$nameHeight: 2vw;
			$swiperPadding: 1vw;
			$swiperItemPadding: 0.25vw;

			width: calc(#{$layerWidth} * 6 + #{$swiperItemPadding} * 2 * 6 + #{$swiperPadding} * 2);
			height: calc(#{$hrefHeight+$nameHeight} + #{$swiperPadding} * 2);
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 0.5vw;
			//左右相减，防止重复计算。上下为0，防止盖住子元素的box-shadow
			padding: 0 #{$swiperPadding - $swiperItemPadding};
			background-color: #FAFCFE;

			.swiperItem {
				padding: #{$swiperPadding} #{$swiperItemPadding};
			}

			.layerResource {
				box-sizing: border-box;
				border: 1px solid #ccc;
				width: $layerWidth;
				border-radius: 0.5vw;
				overflow: hidden;
				box-shadow: rgba(0, 0, 0, 0.24) 0px 0.15vw 0.4vw;
				background-color: #fff;

				&.grey {
					position: relative;

					&::after {
						content: "";
						display: block;
						position: absolute;
						background-color: rgba(0, 0, 0, 0.3);
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}

				&.active {
					outline: 4px solid #2380E9;
				}

				.href {
					width: 100%;
					height: $hrefHeight;
					display: block;
				}

				.name {
					background-color: #EFF4FF;
					text-align: center;
					line-height: $nameHeight;
					height: $nameHeight;
					font-size: 1.2vw;
					box-sizing: border-box;
					border-top: 1px solid #ccc;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 0.5vw;
				}
			}
		}
	}

	.layerResources_Vertical {
		position: relative;

		.arrow {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 2vw;
			height: 2vw;
			background-color: #EFF4FF;
			border-radius: 0.5vw;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;

			/deep/ .uni-icons {
				color: #2380E9 !important;
			}

			&.disabled {
				border: 1px solid #ccc;
				background-color: #F8FAFB;

				/deep/ .uni-icons {
					color: #ccc !important;
				}
			}

		}

		.swiper {
			$layerWidth : 11vw;
			$hrefHeight: 5.4vw;
			$nameHeight: 2vw;
			$swiperPadding: 1vw;
			$swiperItemPadding: 0.3vw;

			width: calc(#{$layerWidth} + #{$swiperPadding} * 2);
			height: calc(#{$hrefHeight+$nameHeight} * 4 + #{$swiperItemPadding} * 2 * 4 + #{$swiperPadding} * 2);
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 0.5vw;
			//上下相减，防止重复计算。左右为0，防止盖住子元素的box-shadow
			padding: #{$swiperPadding - $swiperItemPadding} 0;
			background-color: #FAFCFE;

			.swiperItem {
				padding: #{$swiperItemPadding} #{$swiperPadding};
			}

			.layerResource {
				box-sizing: border-box;
				border: 1px solid #ccc;
				width: $layerWidth;
				border-radius: 0.5vw;
				overflow: hidden;
				box-shadow: rgba(0, 0, 0, 0.24) 0px 0.15vw 0.4vw;
				background-color: #fff;

				&.grey {
					position: relative;

					&::after {
						content: "";
						display: block;
						position: absolute;
						background-color: rgba(0, 0, 0, 0.3);
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}

				&.active {
					outline: 4px solid #2380E9;
				}

				.href {
					width: 100%;
					height: $hrefHeight;
					display: block;
				}

				.name {
					background-color: #EFF4FF;
					text-align: center;
					line-height: $nameHeight;
					height: $nameHeight;
					font-size: 1.2vw;
					box-sizing: border-box;
					border-top: 1px solid #ccc;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 0.5vw;
				}
			}
		}
	}
</style>